<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{fragment/header :: header}"></th:block>
    <meta charset="UTF-8">
    <title>Problem List</title>
    <script src="/js/pagination.js"></script>
    <style>
        .ui.statistic {
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
<main class="ui fluid container">
    <div class="ui grid" id="problem-list">
        <div class="ui twelve wide column container">
            <div class="ui centered grid">
                <div class="ui pagination menu ">
                    <pagination :class="{disabled:first}" content='<i class="angle double left icon"></i>'
                                v-on:change_page="get_page" v-bind:to_page="0"></pagination>
                    <pagination :class="{disabled:first}" content="<i class='angle left icon'></i>"
                                v-on:change_page="get_page" v-bind:to_page="number-1"></pagination>
                    <pagination v-for="n in npage" :class="{active:number == n}" v-bind:content="n+1"
                                v-on:change_page="get_page" v-bind:to_page="n"></pagination>
                    <pagination :class="{disabled:last}" content='<i class="angle  right icon"></i>'
                                v-on:change_page="get_page" v-bind:to_page="number+1"></pagination>
                    <pagination :class="{disabled:last}" content='<i class="angle double right icon"></i>'
                                v-on:change_page="get_page" v-bind:to_page="totpage-1"></pagination>
                </div>
            </div>
            <div class="ui segment" :class="{loading:!ready}">
                <div class="ui animated selection list">
                    <a class="ui link item" target="_blank" v-for="p in problems" :href="'/problems/'+p.id">
                        <div class="ui content">
                            <div class="ui header">{{p.id}} - {{p.title}}</div>
                            <div class="meta">{{p.description.substring(0,35)}}
                                <div class="ui small horizontal labels">
                                    <div class="ui label" v-for="pt in p.tags" v-html="pt.name"></div>
                                </div>
                            </div>
                            <div class="right relaxed floated content">
                                <div class="ui container right aligned">
                                    <div class="ui mini horizontal blue statistic">
                                        <div class="value">{{p.submitted}}</div>
                                        <div class="label">提交</div>
                                    </div>
                                    <div class="ui mini horizontal green statistic">
                                        <div class="value">{{p.accepted}}</div>
                                        <div class="label">通过</div>
                                    </div>
                                    <div class="ui mini horizontal orange statistic">
                                        <div class="value">{{p.score}}</div>
                                        <div class="label">积分</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a></div>
            </div>
            <div class="ui centered grid">
                <div class="ui pagination menu">
                    <pagination :class="{disabled:first}" content='<i class="angle double left icon"></i>'
                                v-on:change_page="get_page" v-bind:to_page="0"></pagination>
                    <pagination :class="{disabled:first}" content="<i class='angle left icon'></i>"
                                v-on:change_page="get_page" v-bind:to_page="number-1"></pagination>
                    <pagination v-for="n in npage" :class="{active:number == n}" v-bind:content="n+1"
                                v-on:change_page="get_page" v-bind:to_page="n"></pagination>
                    <pagination :class="{disabled:last}" content='<i class="angle  right icon"></i>'
                                v-on:change_page="get_page" v-bind:to_page="number+1"></pagination>
                    <pagination :class="{disabled:last}" content='<i class="angle double right icon"></i>'
                                v-on:change_page="get_page" v-bind:to_page="totpage-1"></pagination>
                </div>
            </div>
        </div>
        <div class="ui four wide column">
            <div class="ui blue segment">
                <form class="ui icon input" v-on:submit.prevent="search_problem()">
                    <input type="text" v-model="search_string" placeholder="搜索题目或题号">
                    <i class="search link icon" v-on:click="search_problem()"></i>
                </form>
                <div class="ui labels">
                    <div class="ui label" v-for="tag in search_tag">{{tag}} <i class="close icon"
                                                                               @click="remove_search_tag"></i></div>
                </div>
            </div>
            <div class="ui orange segment" :class="{loading:!ready}">
                <div class="ui dividing header"><i class="ui orange tags icon"></i>题目分类</div>
                <a v-bind:key="t.id" v-for="t in tags" v-html="t.name"
                   class="ui label horizontal relaxed" :class="[colorClass(t.id)]"
                   style="margin:0.2rem;"
                   @click="add_search_tag"
                ></a>
            </div>
        </div>
    </div>
</main>
<footer th:replace="~{fragment/footer :: footer}"></footer>
<script src="/js/problemlist.js"></script>
</body>
</html>